/* 初始化 */
/* 将所有元素的外边距和内边距都设置为 0，避免浏览器默认样式的影响 */
* {
    margin: 0;
    padding: 0;
}

/* 设置 body 元素的字体和字号 */
body {
    font-family: “Microsoft YaHei”;
    font-size: 16px;
}

/* 去除有序列表和无序列表的默认样式 */
ol,
ul {
    list-style-type: none;
}

/* 设置超链接的颜色和去除下划线 */
a {
    color: #000000;
    text-decoration: none;
}

/* 左浮动类 */
.lift {
    float: left;
}

/* 右浮动类 */
.right {
    float: right;
}

/* 定义页面各主要部分的通用样式，背景颜色为白色，宽度为 100% */
#top,
#header,
#lunbo,
#mian,
#fuwu,
#shouhou,
#footer,
#cebian {
    background-color: #ffffff;
    width: 100%;
}

/* 定义容器类，宽度为 1280px，水平居中 */
.containter {
    width: 1280px;
    margin: 0px auto;
}

/* 设置页面顶部样式 */
#top {
    height: 40px;
    background-color: #333333;
}

/* 设置顶部列表项的样式，字体大小为 13px，行高为 40px，左浮动 */
#top ul li {
    font-size: 13px;
    line-height: 40px;
    float: left;
}

/* 设置顶部超链接的样式，颜色为 #B0B0B0，右边框为 1px 灰色，左右内边距为 8px */
#top a {
    color: #B0B0B0;
    border-right: 1px solid #424242;
    padding: 0px 8px;
}

/* 设置顶部超链接悬停时的样式，颜色变为白色 */
#top a:hover {
    color: #ffffff;
}

/* 设置顶部最后一个列表项中超链接的样式，去除右边框 */
#top .endli a {
    border: none;
}

/* 设置页面头部样式 */
#header {
    padding-top: 30px;
    height: 100px;
}

/* 设置头部左侧区域的宽度 */
#header .header_left {
    width: 60px;
}

/* 设置头部左侧区域内图片的宽度 */
#header .header_left img {
    width: 60px;
}

/* 设置导航栏的样式，绝对定位，宽度为 250px，高度为 50px，边框为 1px 浅灰色 */
#header .nav {
    position: relative;
    top: -55px;
    width: 250px;
    height: 50px;
    border: 1px solid #E0E0E0;
}

/* 设置导航栏内输入框的样式，绝对定位，宽度为 200px，高度为 45px，无边框，无轮廓 */
#header .nav input {
    position: relative;
    top: -2px;
    left: 5px;
    width: 200px;
    height: 45px;
    font-size: 16px;
    line-height: 45px;
    border: none;
    outline: none;
}

/* 设置导航栏内按钮的样式，绝对定位，宽度为 45px，高度为 52px，背景色为白色，边框为 1px 浅灰色 */
#header .nav button {
    font-size: 18px;
    position: relative;
    top: -1px;
    left: 5px;
    width: 45px;
    height: 52px;
    background-color: #ffffff;
    border: 1px solid #E0E0E0;
}

/* 设置导航栏悬停时的样式，边框颜色变为橙色 */
#header .nav:hover {
    border-color: #FF6700;
}

/* 设置导航栏悬停时按钮的样式，边框颜色变为橙色 */
#header .nav:hover button {
    border-color: #FF6700;
}

/* 设置导航栏按钮悬停时的样式，文字颜色变为白色，背景色变为橙色 */
#header .nav button:hover {
    color: #ffffff;
    background-color: #FF6700;
}

/* 设置头部列表项的样式，绝对定位，左浮动，左外边距为 20px */
#header div>ul>li {
    position: relative;
    bottom: 40px;
    right: 200px;
    float: left;
    margin-left: 20px;
}

/* 设置头部列表项中超链接的样式，显示为内联块元素，高度为 60px */
#header div>ul>li>a {
    display: inline-block;
    height: 60px;
}

/* 设置头部列表项中超链接悬停时的样式，颜色变为橙色 */
#header div>ul>li>a:hover {
    color: #FF6700;
}

/* 设置头部列表项内下拉菜单的样式，绝对定位，背景色为白色，隐藏显示 */
#header div>ul>li ul {
    background-color: #ffffff;
    float: left;
    text-align: center;
    position: absolute;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    z-index: 999;
    width: 1280px;
    padding: 15px 0;
    display: none;
}

/* 设置不同下拉菜单的左偏移量 */
#header .u1 {
    left: -250px;
}

#header .u2 {
    left: -350px;
}

#header .u3 {
    left: -450px;
}

#header .u4 {
    left: -500px;
}

#header .u5 {
    left: -570px;
}

#header .u6 {
    left: -620px;
}

#header .u7 {
    left: -675px;
}

/* 设置下拉菜单内图片的样式，左右外边距为 16px，宽度为 180px */
#header div>ul>li img {
    margin: 0px 16px;
    width: 180px;
}

/* 设置下拉菜单内列表项的样式，右边框为 1px 浅灰色，左浮动 */
#header div>ul>li li {
    border-right: 1px solid #E0E0E0;
    float: left;
}

/* 设置下拉菜单内列表项悬停时图片的样式，底部边框为 2px 橙色 */
#header div>ul>li>ul>li:hover img {
    border-bottom: 2px solid #FF6700;
}

/* 设置下拉菜单内列表项悬停时段落的样式，字体加粗 */
#header div>ul>li>ul>li:hover p {
    font-weight: bold;
}

/* 设置头部列表项悬停时下拉菜单的样式，显示下拉菜单 */
#header div>ul>li:hover ul {
    display: block;
}

/* 设置下拉菜单悬停时的样式，保持显示 */
#header div>ul>li>ul:hover {
    display: block;
}

/* 设置下拉菜单内第一个段落的样式，顶部外边距为 10px，字体大小为 14px */
#header .u1_p1 {
    margin-top: 10px;
    font-size: 14px;
}

/* 设置下拉菜单内第二个段落的样式，顶部外边距为 5px，底部外边距为 10px，字体大小为 12px，颜色为橙色 */
#header .u1_p2 {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #FF6700
}

/* 设置下拉菜单内最后一个列表项的样式，去除右边框 */
#header .li_end {
    border: none;
}

/* 轮播图 */
#lunbo {
    text-align: center;
    padding-bottom: 50px;
}

/* 设置轮播图主体的样式，相对定位 */
#lunbo .lunbo_main {
    position: relative;
}

/* 设置轮播图上箭头的样式，绝对定位 */
#lunbo .lunbo_shang {
    position: absolute;
    top: 180px;
    left: 5px;
}

/* 设置轮播图下箭头的样式，绝对定位 */
#lunbo .lunbo_xia {
    position: absolute;
    top: 180px;
    right: 5px;
}

/* 设置轮播图图片的样式，宽度为 1270px */
#lunbo img {
    width: 1270px;
}

/* 设置第一张图片悬停时的样式，隐藏图片 */
#lunbo img:nth-child(1):hover {
    display: none;
}

/* 设置第一张图片悬停时相邻图片的样式，显示图片 */
#lunbo img:nth-child(1):hover+img {
    display: inline-block;
}

/* 设置第二张图片悬停时的样式，显示图片 */
#lunbo img:nth-child(2):hover {
    display: inline-block;
}

/* 设置第四张图片悬停时的样式，隐藏图片 */
#lunbo img:nth-child(4):hover {
    display: none;
}

/* 设置第四张图片悬停时相邻图片的样式，显示图片 */
#lunbo img:nth-child(4):hover+img {
    display: inline-block;
}

/* 设置第五张图片悬停时的样式，显示图片 */
#lunbo img:nth-child(5):hover {
    display: inline-block;
}

/* 设置轮播图点的样式，隐藏显示 */
#lunbo .dian {
    display: none;
}

/* 设置轮播图底部按钮容器的样式，绝对定位 */
#lunbo div>div {
    position: absolute;
    bottom: 20px;
    right: 25px;
}

/* 设置轮播图底部按钮的样式，透明度为 0.8，宽度和高度为 10px，边框为 2px 灰色，背景色为灰色，圆角为 5px */
#lunbo button {
    opacity: 0.8;
    width: 10px;
    height: 10px;
    margin: 0px 5px;
    border: 2px solid #908D96;
    background-color: #8B8594;
    border-radius: 5px;
}

/* 主体 */
#main {
    background-color: #F5F5F5;
}

/* 设置主体内图片的样式，宽度为 240px */
#main img {
    width: 240px;
}

/* 设置主体顶部的样式，相对定位，字体颜色为灰色，字体大小为 25px，字体粗细为 100，首行缩进为 10px，行高为 60px */
#main .main_top {
    position: relative;
    top: 25px;
    color: #666666;
    font-size: 25px;
    font-weight: 100;
    text-indent: 10px;
    line-height: 60px;
}

/* 设置主体顶部左侧区域的样式，显示为内联块元素，宽度为 40% */
#main .main_top_left {
    display: inline-block;
    width: 40%;
}

/* 设置主体顶部右侧区域的样式，相对定位，字体大小为 20px，字体粗细为 400，文本右对齐，显示为内联块元素，宽度为 40% */
#main .main_top_right {
    font-size: 20px;
    position: relative;
    right: 25px;
    font-weight: 400;
    text-align: right;
    display: inline-block;
    width: 40%;
}

/* 设置主体顶部右侧区域内段落的样式，颜色为黑色，显示为内联块元素 */
#main .main_top_right>p {
    color: #000000;
    display: inline-block;
}

/* 设置主体内容区域的样式，宽度为 1280px */
#main .main_body {
    width: 1280px;
}

/* 设置主体左侧区域的样式，底部和左侧外边距为 20px，显示为内联块元素，宽度为 240px，顶部外边距为 20px */
#main .main_left {
    margin-bottom: 20px;
    margin-left: 10px;
    display: inline-block;
    width: 240px;
    margin-top: 20px;
}

/* 设置主体右侧区域的样式，顶部外边距为 15px，显示为内联块元素，文本居中，宽度为 1020px，右浮动 */
#main .main_right {
    margin-top: 15px;         /* 顶部外边距15px，与上方元素保持间距 */
    display: inline-block;    /* 行内块级元素，既保持块级特性又能与其他元素同行排列 */
    text-align: center;       /* 文本和内联元素居中对齐 */
    width: 1020px;            /* 固定宽度1020px */
    float: right;             /* 向右浮动，使元素停靠在父容器右侧 */
}

/* 设置主体右侧列表项的样式，左右外边距为 6px，背景色为白色，左浮动 */
#main .main_right li {
    margin: 6px;
    background-color: #ffffff;
    float: left;
}

/* 设置主体右侧第一个段落的样式，字体大小为 15px */
#main .main_right_p1 {
    font-size: 15px;
}

/* 设置主体右侧第二个段落的样式，字体大小为 12px，颜色为灰色 */
#main .main_right_p2 {
    font-size: 12px;
    color: #A2A2A2;
}

/* 设置主体右侧第三个段落的样式，底部外边距为 10px，字体大小为 14px，颜色为橙色 */
#main .main_right_p3 {
    margin-bottom: 10px;
    font-size: 14px;
    color: #FF6700;
}

/* 设置原价的样式，显示为内联块元素，字体大小为 13px，左右外边距为 5px，颜色为灰色，添加删除线 */
#main .yuanjia {
    display: inline-block;
    font-size: 13px;
    margin: 0 5px;
    color: #A2A2A2;
    text-decoration: line-through;
}

/* 设置隐藏的穿戴类和家电类元素的样式，隐藏显示 */
#main #chuandai2 {
    display: none;
}

#main #jiadian2 {
    display: none;
}

/* 设置主体内图片的上下外边距 */
#main .main_img {
    margin-top: 1px;
    margin-bottom: 9px;
}

/* 设置家电类第八个元素内子元素的样式，上下外边距为 53px，左右外边距为 25px，左浮动 */
#main .jiadian_8 div {
    margin: 53px 25px;
    float: left;
}

/* 设置家电类第八个元素内图片的样式，上下外边距为 20px，左右外边距为 7px，宽度为 100px */
#main .jiadian_8 img {
    margin: 20px 7px;
    width: 100px;
}

/* 设置主体内列表项和左侧图片悬停时的样式，添加阴影效果，向上移动 2px，过渡时间为 0.6s */
#main li:hover {
    /* 为元素添加阴影效果，增强悬浮时的立体感：
       2px 2px 分别为水平和垂直偏移量，8px 为阴影模糊半径，#666666 为深灰色阴影颜色 */
    box-shadow: 2px 2px 8px #666666;
    
    /* 元素悬停时沿Y轴向上平移2px，实现"浮动"效果（负值表示向上移动） */
    transform: translateY(-2px);
    
    /* 为所有样式变化添加过渡动画：
       all 表示所有属性都参与过渡，.6s 为过渡持续时间，使动画平滑不突兀 */
    transition: all .6s;
}

#main .main_left>img:hover {
    box-shadow: 2px 2px 8px #666666;
    transform: translateY(-2px);
    transition: all .6s;
}

/* 服务 */
/* 设置服务区域内子元素的样式，上下内边距为 20px，文本居中，字体大小为 20px，字体粗细为 300，颜色为灰色，底部边框为 1px 浅灰色，使用弹性布局 */
#fuwu>div {
    padding: 20px 0px;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    color: #616161;
    border-bottom: 1px solid #E0E0E0;
    display: flex;
}

/* 设置服务区域内子元素的子元素的样式，右边框为 1px 浅灰色，弹性伸缩为 1 */
#fuwu>div>div {
    border-right: 1px solid #E0E0E0;
    flex: 1;
}

/* 设置服务区域内超链接悬停时的样式，颜色变为橙色，过渡时间为 0.3s */
#fuwu>div>div a:hover {
    color: #FF6700;
    transition: all .3s;
}

/* 设置服务区域内最后一个子元素的样式，去除右边框 */
#fuwu .fuwu_end {
    border: none;
}

/* 售后 */
#shouhou {
    height: 280px;
}

/* 设置售后左侧区域的样式，上下内边距为 30px，字体大小为 15px，使用弹性布局，宽度为 1040px */
#shouhou .shouhou_left {
    padding: 30px 0;
    font-size: 15px;
    display: flex;
    width: 1040px;
}

/* 设置售后左侧列表的样式，显示为内联块元素，弹性伸缩为 1 */
#shouhou ul {
    display: inline-block;
    flex: 1;
}

/* 设置售后左侧第一个列表项的样式，底部外边距为 18px，字体粗细为 400 */
#shouhou .shouhou_l1 {
    margin-bottom: 18px;
    font-weight: 400;
}

/* 设置售后左侧列表项的行高 */
#shouhou .shouhou_left li {
    line-height: 30px;
}

/* 设置售后左侧超链接的样式，字体大小为 13px，颜色为灰色 */
#shouhou .shouhou_left a {
    font-size: 13px;
    color: #616161;
}

/* 设置售后左侧超链接悬停时的样式，颜色变为橙色 */
#shouhou .shouhou_left a:hover {
    color: #FF6700;
}

/* 设置售后右侧区域的样式，文本居中，高度为 100px，绝对定位，显示为内联块元素，宽度为 255px，左边框为 1px 浅灰色，上下内边距为 10px */
#shouhou .shouhou_right {
    text-align: center;
    height: 100px;
    position: relative;
    top: -220px;
    display: inline-block;
    width: 255px;
    border-left: 1px solid #E0E0E0;
    padding: 10px 0px;
}

/* 设置售后右侧第一个段落的样式，字体大小为 22px，颜色为橙色 */
#shouhou .shouhou_p1 {
    font-size: 22px;
    color: #FF6700;
}

/* 设置售后右侧第二个段落的样式，字体大小为 12px，行高为 20px，颜色为灰色 */
#shouhou .shouhou_p2 {
    font-size: 12px;
    line-height: 20px;
    color: #616161;
}

/* 设置售后右侧超链接的样式，绝对定位，边框为 1px 橙色，字体大小为 15px，上下左右内边距分别为 5px 和 15px，颜色为橙色 */
#shouhou .shouhou_a {
    position: relative;
    top: 10px;
    border: 1px solid #FF6700;
    font-size: 15px;
    padding: 5px 15px;
    color: #FF6700;
}

/* 设置售后右侧超链接悬停时的样式，背景色变为橙色，颜色变为白色，过渡时间为 0.3s */
#shouhou .shouhou_a:hover {
    background-color: #FF6700;
    color: #ffffff;
    transition: all .3s;
}

/* 页脚 */
#footer {
    height: 100px;
    text-align: center;
    background-color: #F5F5F5;
}

/* 设置页脚图片的样式，圆角为 15px，绝对定位，显示为内联块元素，顶部外边距为 20px，宽度为 60px */
#footer img {
    border-radius: 15px;
    position: relative;
    left: 100px;
    display: inline-block;
    margin-top: 20px;
    width: 60px;
}

/* 设置页脚段落的样式，绝对定位，显示为内联块元素，字体大小为 30px，字体加粗，颜色为灰色，字体为华文楷体 */
#footer p {
    position: relative;
    top: -15px;
    left: 150px;
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    color: #C3C3C3;
    font-family: "STKaiti";
}

/* 侧边 */
#cebian {
    background-color: rgba(255, 255, 255, 0);
    width: 70px;
    position: fixed;
    right: 0px;
    bottom: 80px;
}

/* 设置侧边图片的样式，宽度和高度为 30px */
#cebian img {
    width: 30px;
    height: 30px;
}

/* 设置侧边二维码的样式，绝对定位，背景色为白色，内边距为 10px，隐藏显示 */
#cebian .erweima {
    position: absolute;
    top: 0px;
    right: 80px;
    background-color: #ffffff;
    padding: 10px;
    display: none;
}

/* 设置侧边二维码图片的样式，宽度和高度为 100px */
#cebian .erweima img {
    width: 100px;
    height: 100px;
}

/* 设置侧边每个区域的样式，相对定位，背景色为白色，字体大小为 14px，行高为 20px，上下左右内边距分别为 15px 和 5px，文本居中，边框为 1px 浅灰色 */
#cebian .cebian_d {
    position: relative;
    background-color: rgba(255, 255, 255, 1);
    font-size: 14px;
    line-height: 20px;
    padding: 15px 5px;
    text-align: center;
    border: 1px solid #F5F5F5;
}

/* 设置侧边第一个图片的样式，相对定位，层级为 99 */
#cebian .cebian_i1 {
    position: relative;
    z-index: 99;
}

/* 设置侧边第二个图片的样式，绝对定位，层级为 9 */
#cebian .cebian_i2 {
    position: absolute;
    z-index: 9;
    top: 15px;
    right: 19px;
}

/* 设置侧边区域悬停时超链接内段落的样式，颜色变为橙色 */
#cebian div:hover a>p {
    color: #FF6700;
}

/* 设置侧边区域悬停时二维码的样式，显示二维码 */
#cebian div:hover .erweima {
    display: inline-block;
}

/* 设置侧边区域悬停时第二个图片的样式，层级变为 999 */
#cebian div:hover .cebian_i2 {
    z-index: 999;
}

/* 设置侧边最后一个元素的样式，隐藏显示，相对定位，顶部偏移量为 15px */
#cebian .cebian_end {
    display: none;
    position: relative;
    top: 15px;
}